$color_gray: #9C9C9C;
html{ overflow-x: hidden;}
body{ padding-bottom: 3.6rem; overflow-x: hidden;}
footer{
    display: -webkit-box; position: fixed; bottom: 0; left: 0; width: 100%; border-top: 1px solid #E9E9E9; background: #ffffff;

    a{
        display: block; -webkit-box-flex: 1; padding: 0.2rem 0; color: $color_gray; font-size: 1.2rem;

        &>*{ display: block; text-align: center;}
        &.active{ color: #F56C07;}

        i{ font-size: 1.6rem;}
    }
}

header{
    height: 4rem; line-height: 4rem; font-size: 1.6rem; display: -webkit-box;  -webkit-box-align: center; -webkit-box-pack: justify; padding: 0 1rem; border: 1px solid #EEEEEE;

}



#download_app{
    display: block; width: 100%; position: relative;

    & img{ width: 100%;}

    .delete{ display: block; width: 15.27vw; height: 15.27vw; line-height: 15.27vw; position: absolute; top: 0; right: 0; color: #fff; font-size: 2rem; text-align: center;}
}

#search{
    display: block; font-size: 1.4rem; background: #ffffff; padding-bottom: 6px;

    .search_top{ 
        height: 12vw; line-height: 12vw; padding: 0 6vw;

        i{ color: #CACACA;}
        span{ color: $color_gray; padding-left: 2vw;}
    }
    .search_bottom{ width: 95%; height: 5px; border: 1px solid #EFEFEF; border-top: none; margin: -6px auto 0;}
}



#switcher{
    overflow-x: hidden; position: relative; width: 100%;

    ul{
        width: 700vw; position: relative; left: -100vw;
        li{
            float: left; width: 100vw;

            a{
                display: block; height: 100%;

                img{ width: 100%;}
            }
        }
    } 

    .sw_btn{
        width: 100%; text-align: center; position: absolute; bottom: 0.6rem;;

        span{ 
            display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff; border: 1px solid #ddd; box-shadow: 0 0 1.5rem #ddd; margin: 0 0.1rem;

            &.active{ transform: scale(1.5);}
        }
    }
}


#hot_goods{
    margin-right: -2%; padding: 0.4rem 0 ;

    a{
        display: block; float: left; width: 31.333%; margin-right: 2%;

        img{ width: 100%;}
    }
}



#goods_list{
    

    li{
        &+li{ border-top: 1px solid #F8F8F8;}
        a{ display: -webkit-box;  -webkit-box-align: center; background: #fff;}
    }


    .img{
        width: 34%; position: relative; vertical-align: center;

        .main_img{ width: 100%;}
        .sub_img{
            display: none;
            &.active{ display: block; width: 50%; position: absolute; left: 0; bottom: 0;}
        }
        
    }

    .explain{
        width: 66%; font-size: 1.2rem; padding: 1.2rem 0;

        h5{ font-size: 1.4rem; color: #000;}
        p{ color: $color_gray; padding-right: 0.6rem; margin: 0.35rem 0;}
        em{ color: #FE5B19;}
    }
}






//搜索页
#search_wrap{
    height: 4rem; line-height: 4rem; display: -webkit-box; -webkit-box-pack: justify; -webkit-box-align: center; border-bottom: 1px solid #E4E4E4; margin-bottom: 0.6rem; padding: 0 1rem 0 0.6rem;

    &>*{ display: block;}
    a, span{ width: 10%; text-align: center; font-size: 1.8rem;}
    input{ width: 75%; height: 2.4rem; border: 1px solid #EBEBEB; box-shadow: 0 0 5px #ddd; font-size: 1.2rem;}
}

.search_label{
    padding: 0 0.5rem;

    span{ 
        display: inline-block; background: #E4E4E4; font-size: 1.2rem; padding: 0.3rem 0.5rem; margin: 0.5rem 0.5rem;

        &.active{ border: 1px solid #FB9B82; background: #F6F1EF;}
    }
}




//服务页
#ser_top{
    height: 6.6rem; background: #FF6B00; color: #fff; padding-top: 1rem; position: relative;

    span, em{ display: block; text-align: center;}
    span{ font-size: 1.4rem; }
    em{ width: 6rem; height: 6rem; line-height: 6rem; border-radius: 50%; background: #FFD24D; font-size: 4rem; position: absolute; margin: 0 auto; left: 0; right: 0; bottom: -3rem;}
}


#ser_bot{
    color: #989898; font-size: 1.4rem;
    &>div+div{ 
        margin-top: 1rem; background: #ffffff;

        i{ margin-right: 1rem;}
    }

    .goods_detail{
        height: 10rem; display: -webkit-box; -webkit-box-pack: justify; -webkit-box-align: end; background: #ffffff; padding-bottom: 1.2rem;

        .goods_detail_list{
            width: 33.33%;

            &+.goods_detail_list{ border-left: 1px solid #F1F1F1;}

            i, span{ display: block; text-align: center;}
            i{ font-size: 2.4rem; }
            span{ font-size: 1.4rem;}

            &::after{ display: block; content:""; width: 24%; height: 0; border-top: 2px solid; margin: 0 auto; margin-top: 0.6rem;}
            &:nth-child(1)::after{ border-color: #F2A7C2;}
            &:nth-child(2)::after{ border-color: #CAE3AC;}
            &:nth-child(3)::after{ border-color: #FFD88A;}
        }
    }
    .discount>p, .my_ser, .setting{ padding: 1.5rem 1rem;}
    
}


// 购物车页
#shop_con{
    background: #ffffff; padding: 5rem;

    .shop_none{ width: 10rem; height: 10rem; line-height: 10rem; border-radius: 50%; text-align: center; border: 1px solid #F1F1F1; font-size: 8rem; color: #F1F1F1; margin: 0 auto;}

    .shop_rec{
        width: 100%; height: 5rem; line-height: 5rem; margin: 5rem 0 16.5rem;

        a{ 
            display: inline-block; font-size: 1.6rem; width: 50%; height: 100%; text-align: center;

            &:nth-child(1){ background: #F4F4F4;}
            &:nth-child(2){ background: #FF5722; color: #ffffff;}
        }
    }
}


// 分类页
#sort_con{
    padding: 0 1rem; background: #F5F5F5;
    .sort_wrap{
        background: #ffffff; margin-top: 1rem;
        h3{ height: 6rem; line-height: 6rem; text-align: center; font-size: 1.6rem;}
        ul{
            overflow: hidden; padding-bottom: 1.5rem;
            
            li{
                float: left; width: 25%; margin-bottom: 1rem;
                img{ width: 80%; margin: 0 auto; display: block;}
                h4{ text-align: center; font-size: 1.2rem;}
            }
        }
        
    }
}







































